<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <style>
        a{
            color: #005980;
        }
        .widget-small{
            background-color: #FFFFFF;
            overflow: hidden;
            text-align: center;
            border-radius: 2px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
        }
        .widget-small .fa{
            float: left;
            width: 40%;
            line-height: 80px;
            color: #FFFFFF;
        }
        .widget-user .fa{
            background-color: #029789;
        }
        .widget-visit .fa{
            background-color: #17a2b8;
        }
        .widget-message .fa{
            background-color: #fbad4c;
        }
        .widget-like .fa{
            background-color: #ff646d;
        }
        .widget-small-info{
            float: left;
            text-align: left;
            width: 40%;
            margin-left: 20px;
            margin-top: 18px;
            line-height: 24px;
        }
        .widget-small-info h4{
            font-size: 18px;
        }
        .widget-small-info span{
            font-size: 16px;
        }
        .project-introduce{
            min-height: 466px;
        }
        .project-introduce h4{
            font-weight: bold;
            margin-top: 12px;
            margin-bottom: 8px;
        }
        .project-introduce li{
            list-style: decimal;
            margin-left: 28px;
        }
        .alert {
            padding: 15px;
            margin-bottom: 10px;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        .alert-info {
            color: #31708f;
            background-color: #d9edf7;
            border-color: #bce8f1;
        }
    </style>
</head>
<body class="timo-layout-page">
<div class="layui-row layui-col-space15">
    <div class="layui-col-md3 layui-col-sm6 layui-col-xs12">
        <div class="widget-small widget-user">
            <i class="icon fa fa-users fa-3x"></i>
            <div class="widget-small-info">
                <h4>今日用户</h4>
                <span>[[${users}]]</span>
            </div>
        </div>
    </div>
    <div class="layui-col-md3 layui-col-sm6 layui-col-xs12">
        <div class="widget-small widget-visit">
            <i class="icon fa fa-line-chart fa-3x"></i>
            <div class="widget-small-info">
                <h4>今日访问</h4>
                <span>[[${nowPv}]]</span>
            </div>
        </div>
    </div>
    <div class="layui-col-md3 layui-col-sm6 layui-col-xs12">
        <div class="widget-small widget-message">
            <i class="icon fa fa-comments-o fa-3x"></i>
            <div class="widget-small-info">
                <h4>今日评论</h4>
                <span>[[${comments}]]</span>
            </div>
        </div>
    </div>
    <div class="layui-col-md3 layui-col-sm6 layui-col-xs12">
        <div class="widget-small widget-like">
            <i class="icon fa fa-star fa-3x"></i>
            <div class="widget-small-info">
                <h4>今日IP</h4>
                <span>[[${ip}]]</span>
            </div>
        </div>
    </div>
</div>
<div class="layui-row timo-card-screen">
    <div class="pull-left layui-form-pane timo-search-box">
        <div class="layui-inline">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="start" name="start" th:value="${start}" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="end" name="end" th:value="${end}" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn timo-search-btn">
                <i class="fa fa-search"></i>
            </button>
        </div>
    </div>
</div>
<div class="layui-row layui-col-space15">
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-header">UV</div>
            <div class="layui-card-body" style="height: 517px">
                <div id="uv" style="width: 100%;height: 100%"></div>
            </div>
        </div>
    </div>
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-header">PV</div>
            <div class="layui-card-body" style="height: 517px">
                <div id="pv" style="width: 100%;height: 100%"></div>
            </div>
        </div>
    </div>

    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-header">Top10来源网站</div>
            <div class="layui-card-body" style="height: 517px">
                    <table class="layui-table timo-table">
                        <thead>
                        <tr>
                            <th>来源网站</th>
                            <th>浏览量(PV)</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="item:${fromUrls}">
                            <td th:text="${item.url} == ''?'直接访问':${item.url}">来源网站</td>
                            <td th:text="${item.value}">浏览量(PV)</td>
                        </tr>
                        </tbody>
                    </table>
            </div>
        </div>
    </div>
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-header">Top10入口页面</div>
            <div class="layui-card-body" style="height: 517px">
                    <table class="layui-table timo-table">
                        <thead>
                        <tr>
                            <th>入口地址</th>
                            <th>浏览量(PV)</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="item:${nowUrls}">
                            <td ><a th:href="${item.url}" target="_blank" th:text="${item.url}">人口地址</a></td>
                            <td th:text="${item.value}">浏览量(PV)</td>
                        </tr>
                        </tbody>
                    </table>
            </div>
        </div>
    </div>
    <!--<div class="layui-col-md4">-->
        <!--<div class="layui-card">-->
            <!--<div class="layui-card-header">更新日志</div>-->
            <!--<div class="layui-card-body">-->
                <!--<ul class="layui-timeline">-->
                    <!--<li class="layui-timeline-item">-->
                        <!--<i class="layui-icon layui-timeline-axis">&#xe63f;</i>-->
                        <!--<div class="layui-timeline-content layui-text">-->
                            <!--<h3 class="layui-timeline-title">v1.0.2</h3>-->
                            <!--<p>-->
                               <!--1.增加邮件发送，定时系统。<br>-->
                                <!--2.增加对于url的权限管理。<br>-->
                                <!--3.加入启动初始化模块。<br>-->
                                <!--4.加入博客系统前台模块-->
                            <!--</p>-->
                        <!--</div>-->
                    <!--</li>-->
                    <!--<li class="layui-timeline-item">-->
                        <!--<i class="layui-icon layui-timeline-axis">&#xe63f;</i>-->
                        <!--<div class="layui-timeline-content layui-text">-->
                            <!--<h3 class="layui-timeline-title">v1.0.1</h3>-->
                            <!--<p>-->
                                <!--1.加入博客系统<br>-->
                                <!--2.包括：评论，笔记，博文，类别，标签等功能<br>-->
                                <!--3.修改后台系统名称为小懒虫-->
                            <!--</p>-->
                        <!--</div>-->
                    <!--</li>-->
                    <!--<li class="layui-timeline-item">-->
                        <!--<i class="layui-icon layui-timeline-axis">&#xe63f;</i>-->
                        <!--<div class="layui-timeline-content layui-text">-->
                            <!--<h3 class="layui-timeline-title">v1.0</h3>-->
                            <!--<p>-->
                                <!--正式发布v1.0系统<br>-->
                                <!--1.基于TIMO后台管理系统<br>-->
                                <!--2.增加系统参数功能，前台可以用[/[/${#params.value(参数名称)}}]]使用<br>-->
                                <!--3.去除ztree插件，使用layui的tree.<br>-->
                                <!--4.增加图标的点击选择-->
                            <!--</p>-->
                        <!--</div>-->
                    <!--</li>-->
                    <!--<li class="layui-timeline-item">-->
                        <!--<i class="layui-icon layui-timeline-axis">&#xe63f;</i>-->
                        <!--<div class="layui-timeline-content layui-text">-->
                            <!--<div class="layui-timeline-title">小海豚</div>-->
                        <!--</div>-->
                    <!--</li>-->
                <!--</ul>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
</div>
<script th:replace="/common/template :: script"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script th:inline="javascript">
    layui.use('laydate', function() {
        var laydate = layui.laydate;

        //常规用法
        laydate.render({
            elem: '#start'
        });

        //国际版
        laydate.render({
            elem: '#end'
            , lang: 'en'
        });
    });
    var dom = document.getElementById("uv");
    var myChart = echarts.init(dom);
   var option = {
        legend: {},
        tooltip: {},
        dataset: {
            // 提供一份数据。
            dimensions: ['product', 'UV'],
            source: [[${uv}]]
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: {type: 'category'},
        // 声明一个 Y 轴，数值轴。
        yAxis: {},
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [
            {type: 'line'}
        ]
    }

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
    var dom = document.getElementById("pv");
    var myChart = echarts.init(dom);
    var option = {
        legend: {},
        tooltip: {},
        dataset: {
            // 提供一份数据。
            dimensions: ['product', 'PV'],
            source: [[${pv}]]
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: {type: 'category'},
        // 声明一个 Y 轴，数值轴。
        yAxis: {},
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [
            {type: 'line', itemStyle: {
                    color: '#188df0'
                }}

        ]
    }

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body>
</html>

